<template>
  <div class="page__warp">
    <div class="map_warp">
      <!--  响应市场-->
      <div id="map1" style="height:500px;width:500px;"></div>
    </div>

    <div class="map_warp">
      <!--  地区统计-->
      <div id="map2" style="height:500px;width:500px;"></div>
    </div>

    <div class="map_warp">
      <!--  类型统计-->
      <div id="map3" style="height:500px;width:500px;"></div>
    </div>

    <div class="map_warp">
      <!--  处理时长-->
      <div id="map4" style="height:500px;width:500px;"></div>
    </div>
  </div>

</template>

<script setup>
import * as echarts from "echarts";


// 响应时长
const xysc = () => {
  var myChart = echarts.init(document.getElementById('map1'));

  let option = {
    title: {
      text: '响应\n时长',
      left: "center",//对齐方式居中
      top: "45%",//距离顶部
      textStyle: {//文字配置
        color: "rgb(255,255,255)",//文字颜色
        fontSize: 24,//字号
        align: "center"//对齐方式
      }
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      bottom: '5%',
      left: 'center',
      textStyle: { //图例文字的样式
        color: '#fff',
        fontSize: 16,
      },
    },
    series: [
      {
        name: "",
        type: 'gauge',
        splitNumber: 60, //刻度数量
        min: 0,
        max: 100,
        radius: '73%', //图表尺寸
        center: ['50%', '50%'],
        startAngle: 90,
        endAngle: -269.9999,
        axisLine: {
          show: false,
          lineStyle: {
            width: 0,
            shadowBlur: 0,
            color: [
              [1, '#0dc2fe']
            ]
          }
        },
        axisTick: {
          show: false,
          lineStyle: {
            color: 'auto',
            width: 2
          },
          length: 20,
          splitNumber: 5
        },
        splitLine: {
          show: true,
          length: 32,
          lineStyle: {
            color: 'auto',
          }
        },
        axisLabel: {
          show: false
        },
        pointer: { //仪表盘指针
          show: 0,
        },
        detail: {
          show: 0,
        },
      },
      {
        name: '',
        type: 'pie',
        radius: ['30%', '50%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        // label: {
        //   show: false,
        //   position: 'inside'
        // },
        labelLine: {
          show: true,
          length: 24,
          length2: 40
        },
        data: [
          {value: 1048, name: '2h以内'},
          {value: 735, name: '2-12h'},
          {value: 580, name: '12-24h'},
          {value: 484, name: '24以上'},
        ],

      }
    ]
  }


  myChart.setOption(option);
}


// 地区统计
const dqtj = () => {
  var myChart = echarts.init(document.getElementById('map2'));
  var data = [55, 50, 45, 30, 16];
  var titlename = ['东部', '西部', '中部', '南部', '北部'];
  let option = {
    xAxis: {
      show: false
    },
    yAxis: [{
      show: true,
      data: titlename,
      inverse: true,
      axisLine: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#fff',
        fontSize: 18,
        fontWeight: 'bold'
      },
    }],
    series: [{
      name: '条',
      type: 'bar',
      yAxisIndex: 0,
      data: data,
      barWidth: 10,
      label: {
        normal: {
          show: true,
          position: 'right',
          textStyle: {
            color: '#fff',
            fontSize: '18',
            fontWeight: 'bold'
          }
        }
      },
      itemStyle: {
        normal: {
          barBorderRadius: 20,
          color: '#33FFCC',
        }
      },
    },
    ]
  };

  myChart.setOption(option);
}


// 类型统计
const lxtj = () => {
  var myChart = echarts.init(document.getElementById('map3'));
  let option = {
    grid: {
      top: "25%",
      bottom: "10%"//也可设置left和right设置距离来控制图表的大小
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
        label: {
          show: true
        }
      }
    },
    xAxis: {
      data: ["大雾", "暴雪", "演训", "冰雹", "民间纠纷",],
      axisLine: {
        lineStyle: {
          color: '#3f95c2'
        }
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: "#fff",
          fontSize: 14,
          fontWeight: 'bold'
        }
      },
    },
    yAxis: {
      mim: 0,
      max: 100,
      type: "value",
      name: "",
      nameTextStyle: {
        color: "#fff"
      },
      splitLine: {
        lineStyle: {
          color: "rgba(12, 88, 126, 0.59)"
        }
      },
      axisTick: {
        show: true
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "rgba(12, 88, 126, 0.59)"
        }
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: "#fff",
          fontSize: 16,
          fontWeight: 'bold'
        }
      },

    },
    series: [
      {
        name: "主营业务",
        type: "bar",
        barWidth: 15,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: "#00FFE3"
            },
              {
                offset: 1,
                color: "#4693EC"
              }
            ])
          }
        },
        data: [60, 49, 47, 30, 25]
      }
    ]
  };


  myChart.setOption(option);

  console.log(myChart, '--------------------myChart ---- lxtj')
}


// 处置时长
const czsc = () => {
  var myChart = echarts.init(document.getElementById('map4'));

  var {data, optionConfig} = {
    data: [
      {name: '第一种形态', value: 15, itemStyle: {color: '#7740F7'}, startRatio: 0, endRatio: 0.15},
      {name: '第二种形态', value: 25, itemStyle: {color: '#2E4FF7'}, startRatio: 0.15, endRatio: 0.4},
      {name: '第三种形态', value: 10, itemStyle: {color: '#69CDE7'}, startRatio: 0.4, endRatio: 0.5},
      {name: '第四种形态', value: 20, itemStyle: {color: '#CC32F5'}, startRatio: 0.5, endRatio: 0.7},
    ],
    optionConfig: {},
  };
  const getPie3D = (pieData, internalDiameterRatio) => {
    let series = [];
    let sumValue = 0;
    let startValue = 0;
    let endValue = 0;
    let legendData = [];
    let k =
        typeof internalDiameterRatio !== 'undefined'
            ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
            : 1 / 3;

    // 为每一个饼图数据，生成一个 series-surface 配置
    for (let i = 0; i < pieData.length; i++) {
      sumValue += pieData[i].value;

      let seriesItem = {
        name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
        type: 'surface',

        parametric: true,
        wireframe: {
          show: false,
        },
        pieData: pieData[i],
        pieStatus: {
          selected: false,
          hovered: false,
          k: k,
        },
        labelLine: {
          show: false,
        },
        label: {
          show: false,
          // normal: {
          //   position: "inner",
          //   formatter: (params) => {
          //     return params;
          //   },
          // },
        },
        itemStyle: {
          opacity: 1,
        },
      };

      if (typeof pieData[i].itemStyle != 'undefined') {
        let itemStyle = {};

        typeof pieData[i].itemStyle.color != 'undefined' ? (itemStyle.color = pieData[i].itemStyle.color) : null;
        typeof pieData[i].itemStyle.opacity != 'undefined'
            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
            : null;

        seriesItem.itemStyle = itemStyle;
      }
      series.push(seriesItem);
    }

    // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
    // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
    for (let i = 0; i < series.length; i++) {
      endValue = startValue + series[i].pieData.value;
      // console.log(series[i]);
      series[i].pieData.startRatio = startValue / sumValue;
      series[i].pieData.endRatio = endValue / sumValue;
      series[i].parametricEquation = getParametricEquation(
          series[i].pieData.startRatio,
          series[i].pieData.endRatio,
          false,
          false,
          k,
          series[i].pieData.value
      );

      startValue = endValue;

      legendData.push(series[i].name);
    }

    // 准备待返回的配置项，把准备好的 legendData、series 传入。
    let option = {
      tooltip: {
        backgroundColor: '#053A8D',
        formatter: (params) => {
          if (params.seriesName !== 'mouseoutSeries') {
            return `${
                params.seriesName
            }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
                params.color
            };"></span>${option.series[params.seriesIndex].pieData.value}`;
          }
        },
      },

      labelLine: {
        show: true,
      },
      label: {
        show: true,
      },
      legend: {
        orient: 'vertical',
        data: legendData,
        textStyle: {
          color: 'rgba(150,202,223)',
          fontSize: 12,
        },
        itemWidth: 10,
        itemHeight: 10,
        icon: 'roundRect',
        formatter: function (name) {
          let item = data.filter((item) => item.name == name)[0];
          return `${item.name}  ${item.value}%`;
        },
        left: 'right',
        top: '30%', //居右显示
      },
      xAxis3D: {
        min: -1.3,
        max: 1.3,
      },
      yAxis3D: {
        min: -1.3,
        max: 1.3,
      },
      zAxis3D: {
        min: -1.3,
        max: 1.3,
      },
      grid3D: {
        show: false,
        boxHeight: 4,
        top: '-12%',
        left: '-2%',
        // environment: "#021041",
        viewControl: {
          distance: 6000,
          alpha: 60,
          beta: 10,
        },
      },
      series: series,
    };
    return option;
  };
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
  const getParametricEquation = (startRatio, endRatio, isSelected, isHovered, k, height) => {
    // 计算
    let midRatio = (startRatio + endRatio) / 2;

    let startRadian = startRatio * Math.PI * 2;
    let endRadian = endRatio * Math.PI * 2;
    let midRadian = midRatio * Math.PI * 2;

    // 如果只有一个扇形，则不实现选中效果。
    if (startRatio === 0 && endRatio === 1) {
      isSelected = false;
    }

    // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
    k = typeof k !== 'undefined' ? k : 1 / 3;

    // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
    let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
    let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;

    // 计算高亮效果的放大比例（未高亮，则比例为 1）
    let hoverRate = isHovered ? 1.05 : 1;

    // 返回曲面参数方程
    return {
      u: {
        min: -Math.PI,
        max: Math.PI * 3,
        step: Math.PI / 32,
      },

      v: {
        min: 0,
        max: Math.PI * 2,
        step: Math.PI / 20,
      },

      x: function (u, v) {
        if (u < startRadian) {
          return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
        }
        if (u > endRadian) {
          return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
        }
        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
      },

      y: function (u, v) {
        if (u < startRadian) {
          return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
        }
        if (u > endRadian) {
          return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
        }
        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
      },

      z: function (u, v) {
        if (u < -Math.PI * 0.5) {
          return Math.sin(u);
        }
        if (u > Math.PI * 2.5) {
          return Math.sin(u);
        }
        return Math.sin(v) > 0 ? 1 * height : -1;
      },
    };
  };

  let option = getPie3D(data, 0);


  console.log(option, '--------------------')
  console.log(myChart, '--------------------myChart ---- czsc')
  myChart.setOption({});
  myChart.setOption(option);
}

onMounted(() => {
  xysc()
  dqtj()
  lxtj()
  czsc()
})

</script>

<style scoped lang="scss">
.page__warp {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.map_warp {

  background-color: #0f235b;
  width: 500px;
  height: 500px;
  border-radius: 4px;
}
</style>
